<template>
  <div class="container login">
    <div class="flex item-v-center item-h-center full">
      <div class="flex-content">
        <div class="c-loginWall">
          <div class="c-logo">
            <img src="@/assets/images/logo.png" alt="" />
          </div>
          <!-- <el-form
            label-position="top"
            ref="loginForm"
            :model="pageAjax.data"
            class="c-formBox"
            :rules="pageAjax.rules"
          >
            <div class="tc">登录</div>
            <el-divider></el-divider>
            <el-form-item label="账号" prop="username">
              <el-input v-model="pageAjax.data.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="pageAjax.data.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="rSubmitForm" class="wf"
                >提交</el-button
              >
            </el-form-item>
          </el-form> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/passport.js";
import { getUserInfo } from "@/api/user.js";

export default {
  name: "login",
  data: () => ({
    pageAjax: {
      loading: false,
      data: {
        username: "",
        password: "",
        grant_type: "password"
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    }
  }),

  created() {
    // 获取路由上的token
    // if (this.$route.query.token) {
    //   const sid = { access_token: this.$route.query.token }
    //   localStorage.setItem('sid', JSON.stringify(sid))
    //   this.$store.commit('setSid', sid)
    //   this.getUserInfo()
    // }
  },

  methods: {
    rSubmitForm() {
      var _that = this;
      var pageAjax = _that.pageAjax;
      if (pageAjax.loading) {
        return;
      }
      _that.$refs["loginForm"].validate(valid => {
        if (valid) {
          _that.pageAjax.loading = true;

          login(pageAjax.data)
            .then(resp => {
              const respData = resp.data || {};
              if (respData.code === _that.STATUS.success[0]) {
                localStorage.setItem("sid", JSON.stringify(respData.data));
                _that.$store.commit("setSid", respData.data);

                _that.getUserInfo();
              } else {
                _that.$message.error(respData.msg || "登陆出现错误");
              }
            })
            .finally(() => {
              _that.pageAjax.loading = false;
            });
        } else {
          _that.$message.error("账号密码不能为空");
          return false;
        }
      });
    },
    getUserInfo() {
      const _that = this;

      getUserInfo().then(userResp => {
        const userRespData = userResp.data || {};
        if (userRespData.code === _that.STATUS.success[0]) {
          localStorage.setItem("userData", JSON.stringify(userRespData.data));
          _that.$store.commit("setUserData", userRespData.data);
          _that.$message({
            type: "success",
            duration: "800",
            message: "登陆成功",
            onClose: () => {
              _that.$router.push({ name: "dashboard" });
              // location.replace("/admin/");
            }
          });
        } else {
          _that.$message.error(userRespData.msg || "获取用户信息出现错误");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  .c-loginWall {
  }
  .c-logo {
    text-align: center;
    img {
      width: 220px;
    }
  }
  .c-formBox {
    position: relative;
    border-radius: 8px;
    width: 520px;
    margin: 30px auto 20px;
    padding: 17px 40px 40px;
    background: #fff;
    border: 1px solid #eee;
  }
}
</style>
